<template>
	<view class="container bg-white">
		<block v-if='status==1'>
			<view class="register">验证码登录</view>
			<view class="content">
				<view class="phone" @click="clear($event)">
					<input placeholder-class='plac' type="number" v-model="phone" value="" class="text-13 flex-treble"
						placeholder="请输入手机号码" />
					<view class="img" v-if='phone' @click="clear()">
						<image  src="../../static/close2.png"></image>
					</view>
				</view>
				<view class="code" @click="getCode">获取验证码</view>
			</view>
		</block>
		<block v-else>
			<codeVerify @verify='verify' :verifyTip='verifyTip' :phone='phone' :isShow="isShow" @reGet='reGet'></codeVerify>
		</block>
		
	</view>
</template>

<script>
	import codeVerify from '@/components/code-verify.vue' 
	export default {
		data() {
			return {
                status:1,
				phone:'',
				timer: null,
				verifyTip: 60,
				isShow:true,
				code:""
			}
		},
		components: {
			codeVerify
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		methods: {
			clear(e){
				this.phone = ''
				console.log(e)
				
			},
            async getCode() {
            	if (this.phone) {
            		const data = {
            			mobile: this.phone,
            			codeType: 2
            		}
            		const [err, rs] = await this.$post(this.$api.sendCode, data)
                    if (rs) {
						console.log(rs)
            			this.$util.msg(rs.message)
            			this.status = 2
            			this.timedown(this.verifyTip)
            		}
            
            
            	} else {
            		this.$util.msg('请输入手机号')
            	}
            },
			  setPwd(){
				  console.log(1111)
			  },
			  timedown(num) {
			  	console.log(num)
			  	let that = this;
			  	if (num == 0) {
			  		that.isShow = false;
			  		return clearTimeout();
			  	} else {
			  		that.isShow = true;
			  		this.timer = setTimeout(function() {
			  			that.verifyTip = num - 1
			  			that.timedown(num - 1);
			  		}, 1000);
			  	}
			  },
			  reGet(){
			  	this.verifyTip = 60
			  	this.getCode()
			  	
			  },
			  async verify(data){
				  console.log(data)
			  	this.code =data.code
				data['codeType'] = 2
			      const [err,rs] = await this.$post(this.$api.verifyCode,data)
			  	console.log(rs)
			  	if(rs){
			  	   const data ={mobile:this.phone,loginType:2,code:this.code}
			  	   const [err,rs] = await this.$post(this.$api.login,data)
			  	   if(rs){
			  	   	uni.setStorage({
			  	   		key: 'userId',
			  	   		data: rs.data.id
			  	   	})
			  	   	uni.switchTab({
			  	   		url:'/pages/file/file'
			  	   	})
			  	   }
			  	}
			  }
		}
	}
</script>

<style  lang="scss">
	
	page{
		height: 100%;
	}
	.container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow: hidden;

		.register {
			padding-top: 97rpx;
			font-size: 54rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #181818;
			padding-left: 67rpx;
		}
	}

	.content {
		padding-left: 63rpx;
		padding-right: 66rpx;
		margin-top: 123rpx;
	}

	.phone {
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #ED7200;
		display: flex;
		justify-content: space-between;
		position: relative;
         .img{
			position:absolute;
			width: 64rpx;
			height: 64rpx;
			right: 0;
			text-align: center;
			line-height: 64rpx;
			z-index: 99;
			 
		 }
		image {
			width: 32rpx;
			height: 32rpx;
		}
		

		input {
			font-weight: bold;
			color: #181818;
			background: transparent;
			font-size: 34rpx;
		}


	}

	.plac {
		font-weight: normal;
	}
	.code{
		margin-top: 118rpx;
		height: 94rpx;
		background: #ED7200;
		border-radius: 45rpx;
		text-align: center;
		line-height: 94rpx;
		color:#FFFFFF;
		font-size: 32rpx;
	}
</style>
